<template>
  <div class="food-material-form">
    <div class="button-container">
      <el-button type="primary" @click="addClick">新增</el-button>
    </div>
    <el-table :data="foodStore.currentRecipe.materialList"
              border stripe @row-click="handleRowClick" class="material-table">
      <el-table-column type="index" align="center" width="40" />
      <el-table-column prop="type" label="类型" align="center" min-width="10%"/>
      <el-table-column prop="name" label="名称" align="center" min-width="20%"/>
      <el-table-column prop="amount" label="分量" align="center" min-width="20%"/>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { useFoodStore } from '@/store/food'
import type { IMaterial } from '@/types/food'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'

const foodStore = useFoodStore()

const addClick = () => {
  foodStore.materialApiType = 'ADD'
  foodStore.materialDialog = {
    title: '新增食材',
    visible: true,
    data: foodStore.getEmptyMaterial()
  }
}

const handleRowClick = (row: IMaterial) => {
  foodStore.editMaterialIndex = foodStore.currentRecipe.materialList.indexOf(row)
  foodStore.materialApiType = 'UPDATE'
  foodStore.materialDialog = {
    title: '编辑食材',
    visible: true,
    data: deepCopyObject(row)
  }
}
</script>

<style lang="scss">
.food-material-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
</style>
